<script setup lang="ts">
import { onLoad, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
import { useList } from "@/hooks/page";
import { offline_course_items_api } from "@/package/mall/api/guider_home";
import { Router } from "@/utils/router";

import ListTrainItem from "./components/list-train-item.vue";
import ListMore from "@/components/list/more.vue";

onLoad(() => reloadList());
onPageScroll(() => (listLoadMore.value = listData.value.length > 1));
onReachBottom(() => loadMoreList());

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 10 }, (query) => {
    return offline_course_items_api(query);
  });

const trainClick = (id: string) => {
  Router.navigateTo(`/package/mall/pages/train/detail?id=${id}`);
};
</script>

<template>
  <view class="list-data">
    <view class="list-data-wrapper">
      <view
        class="list-data-item"
        v-for="i of listData"
        :key="i.id"
        @click="trainClick(i.id)"
      >
        <ListTrainItem :info="i" />
      </view>
    </view>
    <ListMore v-if="listLoadMore" :status="listStatus" />
  </view>
</template>

<style lang="scss">
.list-data {
  .list-data-wrapper {
    padding-top: 20rpx;
  }

  .list-data-item {
    margin: 0 30rpx 20rpx;
  }
}
</style>